<template>
    <div>
       <div class="ca_head">
        <image :src="src1" class="ca_headd" resize="cover" @click="back()"></image>
        <text class="ca_head1">添加商品种类</text>
      </div>
      <div class="ca_box">
      	<div class="ca_box1">
      	  <text class="ca_fir1" v-for="( index, item ) in items" :key="index.item"
      	  @click="activeTab = i">{{index.biu}}</text>
      	</div>
      	<div class="ca_tab-panels">
      	  <div class="ca_panel" v-for="( index,item ) in list" :key="index.item">
      	  	<image class="ca_pop" :src="index.src"></image>
      	  	<text class="ca_pol_text">{{index.text}}</text>
      	  </div>
      	</div>
      </div>
    </div>
</template>
<style scoped>
   .ca_head{
      width: 100%;
      height: 48px;
      padding-top: 12px;
      box-sizing: border-box;
      line-height: 32px;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      box-shadow: 1px 1px 1px #ccc;
      background-color: #fff;
    }
    .ca_headd{
      width: 15px;
      height: 20px;
      position: absolute;
      left: 12px;
    }
    .ca_head1{
      font-size: 20px;
      font-weight: bold;
      color: #33c179;
    }
    .ca_box{
    	width: 100%;
    	min-height: 600px;
    	/*background-color: pink;*/
    	flex-direction: row;
    	box-sizing: border-box;
    }
    .ca_box1{
    	width: 96px;
    	height: 600px;
    	/*background-color: silver;*/
    	flex-direction: column;
    	border-right: solid 1px #bfbfbf;
    	box-sizing: border-box;
    }
    .ca_tab-panels{
    	width: 253px;
    	height: 600px;
    	/*background-color: red;*/
    	margin-left: auto;
    	margin-right: auto;
    	box-sizing: border-box;
    	justify-content: space-between;
    	flex-wrap: wrap;
    	flex-direction: row;
    	overflow: scroll;
    }
    .ca_fir1{
    	width: 96px;
    	min-height: 50px;
    	line-height: 50px;
    	text-align: center;
    	/*background-color: pink;*/
    	border-bottom: solid 1px #bfbfbf;
    	padding-left: 5px;
    	padding-right: 5px;
    }
    .ca_panel{
    	width: 62px;
    	height: 118px;
    	/*background-color: pink;*/
    	box-sizing: border-box;
    	flex-direction: column;
    	box-sizing: border-box;
    	margin-right: 20px;
    }
    .ca_pop{
    	width: 62px;
    	height: 62px;
    	border-radius: 50%;
    	/*background-color: silver;*/
    	margin-top: 20px;
    	box-shadow: 1px 3px 3px #e7e3e3;

    }
    .ca_pol_text{
    	width: 62px;
    	height: 16px;
    	line-height: 16px;
    	text-align: center;
    	margin-top: 20px;
    }
</style>
<script>
 export default {
    data () {
        return {
         	srccc: 'http://192.168.2.123:8080/img/index_back.png', //返回按钮
          	activeTab: 0,
          itemsss: [
            {
              biu: '所有类目',
            },
            {
              biu: '汽车服务',
            },
            {
              biu: '常规保养',
            },
            {
              biu: '汽车维修',
            },
            {
              biu: '美容清洗',
            },
            {
              biu: '汽车相关',
            },
            {
              biu: '常用配件',
            },
            {
              biu: '汽车内饰',
            },
            {
              biu: '我的类目',
            },
          ],
          listtt:[
          	{
          		text: '我不信',
          		src: 'http://192.168.2.123:8080/img/header.jpg'
          	},
          	{
          		text: '我不信',
          		src: 'http://192.168.2.123:8080/img/header.jpg'
          	},
          	{
          		text: '我不信',
          		src: 'http://192.168.2.123:8080/img/header.jpg'
          	},
          	{
          		text: '我不信',
          		src: 'http://192.168.2.123:8080/img/header.jpg'
          	},
          	{
          		text: '我不信',
          		src: 'http://192.168.2.123:8080/img/header.jpg'
          	},
          	{
          		text: '我不信',
          		src: 'http://192.168.2.123:8080/img/header.jpg'
          	},
          	{
          		text: '我不信',
          		src: 'http://192.168.2.123:8080/img/header.jpg'
          	},
          	{
          		text: '我不信',
          		src: 'http://192.168.2.123:8080/img/header.jpg'
          	},
          	{
          		text: '我不信',
          		src: 'http://192.168.2.123:8080/img/header.jpg'
          	}
          ]
        }
    },
    methods: {
    	// 点击返回
       backkk(){
       	this.$router.back(-1);
       }, 
    }
}
</script>